<template>
    <div>
        <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu :index="(index+1).toString()" v-for="(item,index) in list" :key="index">
          <template #title>
           
            <el-icon v-if="index==0"><Box /></el-icon>
            <el-icon v-else-if="index==1"><Sunny /></el-icon>
            <el-icon  v-else-if="index==2"><Apple /></el-icon>
            <el-icon v-else><Chicken /></el-icon>
            <span>{{item.catagory}}</span>
          </template>
            <el-menu-item :index="((index+1)+'-'+(i+1)).toString()" v-for="(list,i) in item.list" :key="i" @click="send(list.cid)">{{ list.name }}</el-menu-item>
            
        </el-sub-menu>
        
      </el-menu>
    </div>
</template>

<script>
import { Box,Sunny,Apple,Chicken } from "@element-plus/icons-vue";
import axios from 'axios';

export default{
  methods:{
    send(val){
      this.$emit('handle',val)
    }
  },
  components:{
      Box,
      Sunny,
      Apple,
      Chicken
  },
    mounted(){
        axios.get("/navlist.json").then(res=>{
            this.list=res.data.navlist
        })
    },
    data(){
        return{
            list:[]
        }
    }
}
</script>